<script lang="ts" setup>
import { ref, reactive, toRef, toRefs } from 'vue'
import Child from './Child.vue'
// import FormConfig from './FormConfig.vue'
import { Member, UserInfo } from '../enum/index'

interface Props {
    config: Member,
    dataJson: UserInfo
}
const props = defineProps<Props>()
const itemConfig = toRef(props.config)
const dataJson = toRef(props.dataJson)
const cmps = {
    'child': Child
}
</script>
<template>
    <div class="item-box">
        <template v-if="itemConfig.type">
            <div>{{ itemConfig.name }}</div>
            <component :is="cmps[itemConfig.type]" :children="itemConfig.children">
                <template #paneConfig="{ data }">
                    <!-- Tips: template中可以使用dataJson的值 -->
                    <!-- {{ dataJson.name }}--{{ dataJson.age }} -->
                    <div class="form-config-child2">
                        <!-- 嵌套1 -->
                        <slot name="tabForm" :data="{
                            config: data.config,
                            dataJson: dataJson
                        }"></slot>
                        <!-- 嵌套2 -->
                        <!-- <form-config :config="data.config"></form-config> -->
                        <!-- Tips: 嵌套1、2都可实现在子组件child中嵌套form-config，但有细微不同 -->
                        <!-- 嵌套1 会有form-config中<div class="form-config-child"></div>中的嵌套内容 -->
                        <!-- 嵌套2 重新嵌套<div class="form-config-warpper"></div>中的内容 -->

                        <!-- 这里我使用第一种嵌套 -->
                    </div>
                </template>
            </component>
        </template>
        <template v-else>
            <div>{{ itemConfig.name }}</div>
            <div v-if="itemConfig.children">
                <slot name="tabForm" :data="{
                    config: itemConfig.children || [],
                    dataJson: dataJson
                }"></slot>
            </div>
        </template>
    </div>
</template>
<style>
.item-box {
    text-align: left;
    padding: 0 10px;
    background: #eee;
    border:1px solid #aaa;
}
.form-config-child2 {
    background: #E1FFFF;
    padding:5px;
}
</style>